<!DOCTYPE html>
{% if success %}
    <script>
        setTimeout(function () {
            window.location.href = "{% url 'login_page' %}";
        }, 2000);  // 2 秒后跳转
    </script>
{% endif %}

{% if error %}
    <p style="color: red;">{{ error }}</p>
{% endif %}
<html>
<head>
    <title>用户注册</title>
    <style>
        /* 保持与登录页面完全一致的全局样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .register-container {
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            transition: transform 0.2s;
        }

        .register-container:hover {
            transform: translateY(-2px);
        }

        h2 {
            color: #2d3436;
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        input, select {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
            appearance: none; /* 移除默认下拉箭头 */
        }

        select {
            background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg ' viewBox='0 0 24 24' fill='%236c5ce7'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") no-repeat right 12px center/15px;
        }

        input:focus, select:focus {
            outline: none;
            border-color: #6c5ce7;
            box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
        }

        input::placeholder {
            color: #999;
        }

        button {
            background: #6c5ce7;
            color: white;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #5b4bc4;
        }

        .login-section {
            text-align: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .login-link {
            color: #6c5ce7;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .login-link:hover {
            color: #5b4bc4;
            text-decoration: underline;
        }

        /* 消息提示样式统一 */
        .message {
            text-align: center;
            margin: 15px 0;
            padding: 10px;
            border-radius: 6px;
        }

        .error {
            color: #ff4757;
            background: #ffecee;
        }

        .success {
            color: #2ed573;
            background: #e8f9f0;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>创建新账户</h2>
        <form method="post">
            {% csrf_token %}
            <input type="text" name="username" placeholder="请输入用户名" required>
            <input type="password" name="password" placeholder="请输入密码（至少8位）" required>
            
            <select name="role">
                <option value="" disabled selected>选择用户角色</option>
                <option value="advertiser">广告主</option>
                <option value="editor">广告编辑</option>
                <option value="manager">广告主管</option>
            </select>

            <button type="submit">立即注册</button>
        </form>

        <!-- 登录链接 -->
        <div class="login-section">
            <span>已有账户？</span>
            <a href="{% url 'login_page' %}" class="login-link">立即登录</a>
        </div>

        <!-- 统一消息提示样式 -->
        {% if error %}
            <div class="message error">{{ error }}</div>
        {% endif %}
        {% if success %}
            <div class="message success">{{ success }}</div>
        {% endif %}
    </div>
</body>
</html>